<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<script type="text/javascript">
			$(function(){
				var data = [
				        	{name : 'Twitter',value : 15,color:'#feabc9'},
				        	{name : 'Instant Messenger',value : 28,color:'#ffdb6d'},
				        	{name : 'Dribbble',value : 32,color:'#96e2f2'},
				        	{name : 'Forrst',value : 10,color:'#f86a66'},
				        	{name : 'Other',value : 15,color:'#86c399'}
			        	];
	        	
				var chart = new iChart.Donut2D({
					render : 'canvasDiv',
					data: data,
					footnote : {
						text : 'ichartjs.com',
						color : '#486c8f',
						fontsize : 12,
						padding : '0 38'
					},
					sub_option : {
						label : false,
						border : false
					},
					legend:{
						enable:true,
						padding:60,
						offsetx:-86,
						color:'#3e576f',
						fontsize:20,//文本大小
						sign_size:20,//小图标大小
						line_height:24,//设置行高
						sign_space:10,//小图标与文本间距
						border:false,
						valign:'bottom',
						background_color : null//透明背景
					},
					align : 'left',
					offsetx:50,
					separate_angle:10,//分离角度
					shadow : true,
					shadow_blur : 2,
					shadow_color : '#aaaaaa',
					shadow_offsetx : 0,
					shadow_offsety : 0,
					background_color:'#f3f3f3',
					width : 800,
					height : 400,
					radius:150
				});

				//利用自定义组件构造右侧说明文本
				chart.plugin(new iChart.Custom({
						drawFn:function(){
							//在右侧的位置，渲染说明的文字
							chart.target.textAlign('start')
							.textBaseline('top')
							.textFont('600 18px Verdana')
							.fillText('Procrastination Activity',430,100,false,'#3e576f')
							.textFont('600 14px Verdana')
							.fillText('A breakdown of daily distractions and\nthe amount of time spent on each...roughly.',430,130,false,'#3e576f',false,24);
							
						}
				}));
				
				chart.draw();
			});
		</script>
	</head>
	<body>
		<div id='canvasDiv'></div>
		<div class='ichartjs_info'>
				<span class='ichartjs_author'>writen by <a title="示例的贡献者" href="mailto:taylor@ichartjs.com">taylor</a></span>
				<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">View Code</span>
				<div class='ichartjs_sm'>说明</div>
				<div class='ichartjs_details'>
					这是一个环形图示例，风格图片来源于网络。示例中大量运用了偏移来定位各个组件的位置，以达到效果。
				</div>
				<span class='ichartjs_sm'>备注：</span>
				<span class='ichartjs_details'>
					数据来源于网络。
				</span>
			</div>
	</body>
</html>